<template>
  <div>
    <div class="top">
      <header>
        <div class="div" @click="back()">
          <img src="../../assets/fff返回.png" alt="">
          <span class="sides">返回</span>
        </div>
        <div class="div">
          <span>人员管理</span>
        </div>
        <div class="div" @click="newBuild()">
          <img src="../../assets/白添加.png" alt="">
          <span class="sides">新建档案</span>
        </div>
      </header>
      <div class="search">
        <el-select v-model="perName"
                   style="width: 120px"
                   filterable
                   remote
                   @focus="clickName()"
                   @volumechange="clickName()"
                   @change="changePer"
                   :remote-method="remoteMethodName"
                   :class="[perName.length > 0 ? 'select' : 'noselect']"
                   placeholder="人员姓名">
          <el-option
            v-for="item in option1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="perPhone"
                   style="width: 160px"
                   filterable
                   @volumechange="clickPerPhone"
                   @focus="clickPerPhone"
                   @change="changePer"
                   remote
                   :remote-method="remoteMethodPhone"
                   :class="[perPhone.length > 0 ? 'select' : 'noselect']"
                   placeholder="电话号码">
          <el-option
            v-for="item in option2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content" v-if="isLoading === false">
      <div class="box"  v-for="(item, index) in peopleList" :key="index" @click="look(item.id)">
        <ul>
          <li :class="{ 'nan' : item.sex==1, 'nv' : item.sex == 2}">
            <img v-show="item.sex == 2" src="../../assets/女患者@2x.png" alt="">
            <img v-show="item.sex == 1" src="../../assets/男患者@2x.png" alt="">
            <span class="name">{{item.name}}</span>
            <span v-show="item.sex == 2">女</span>
            <span v-show="item.sex == 1">男</span>
            <span style="margin-left: 5px">{{item.age}}岁</span>
            <span class="myself" v-show="userid === item.jmx_user_id" :class="[item.sex == 2 ? 'mySelfGirl' : 'mySelfBoy']">本人</span>
          </li>
          <li>
            <div>
              档案编号: {{item.XID}}
            </div>
            <div>
              地址: {{item.zuizhongAddress}}
            </div>
            <div>
              电话: {{item.phone}}
            </div>
          </li>
        </ul>
      </div>
      <van-empty
        style="width: 100%;height: 60%"
        v-show="peopleList.length <= 0"
        class="custom-image"
        :image="require('../../assets/空两本书.png')"
        description="暂无人员档案"
      />
    </div>
    <div class="content loading" v-else>
      <van-loading  size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'FilesGuanLi',
  data () {
    return {
      userid: '',
      peopleList: [],
      isLoading: true,
      perName: '',
      perPhone: '',
      option1: [],
      option2: []
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    $('.content').css('height', $(window).height() - $('.content').offset().top - 50 + 'px')
    this.getPeople(this.userid)
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 新建
    newBuild () {
      this.$router.push({path: '/profiles', query: {'userid': this.userid, 'isAdd': 1}})
    },
    // 获取全部人员信息
    getPeople () {
      this.$http.listhealthFormationpeople({'userid': this.userid, name: this.perName, phone: this.perPhone})
        .then(res => {
          console.log(res)
          if (res.data.msg === undefined) {
            this.peopleList = res.data
          }
          // 如果请求成功后隐藏加载
          this.isLoading = false
        })
        .catch(err => {
          console.log(err)
        })
    },
    changePer () {
      this.getPeople()
    },
    getName (name) {
      this.$http.findHealthName({userid: this.userid, name: name})
        .then(res => {
          var _this = this
          _this.option1 = [{
            value: '',
            label: '全部人员姓名'
          }]
          console.log(res)
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.name,
                label: curr.tuomin
              }
              _this.option1.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    remoteMethodName (query) {
      this.getName(query)
    },
    // 姓名筛选框获得焦点
    clickName () {
      this.getName('')
    },
    remoteMethodPhone (query) {
      this.getPhone(query)
    },
    // 电话号码 筛选框获取焦点
    clickPerPhone () {
      this.getPhone('')
    },
    getPhone (name) {
      this.$http.findHealthphone({userid: this.userid, name: name})
        .then(res => {
          console.log(res)
          var _this = this
          this.option2 = [{
            value: '',
            label: '全部人员电话号码'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.phone,
                label: curr.tuomin
              }
              _this.option2.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    look (id) {
      this.$router.push({path: '/filesXiang', query: {'userid': this.userid, 'id': id, 'show': 0}})
    }
  }
}
</script>

<style scoped>
   /deep/ .van-nav-bar{
    height: 12vw;
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
   /deep/ .van-nav-bar__left, /deep/ .van-nav-bar__right{
     padding: 0 15px;
   }
   /deep/ .van-nav-bar__title{
     font-size: 15px;
     color: #fff;
     font-family: PingFang SC;
     font-weight: bold;
   }
   .top{
     position: sticky;
     top: 0;
     z-index: 999;
   }
  .search{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden ;
    /*background: #A5DBFA;*/
  }
   .search>input::placeholder{
     color: #999999 !important;
   }
   .search>*{
     margin-left: 8px;
   }
  header{
    background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
   header .div{
     width: 33%;
     display: flex;
     align-items: center;
     color: #fff;
   }
  header .div:nth-child(1)  img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
    margin-left: 15px;
  }
   header .div:nth-child(2){
     justify-content: center;
   }
   header .div:nth-child(3) {
     justify-content: flex-end;
     margin-right: 15px;
   }
   .div:nth-child(3) img{
     width: 14px;
     height: 14px;
     margin-right: 3px;
   }
  .sides{
    color: #fff;
  }
  .title {
    font-size: 17px;
  }
  .jump img{
  }
  .jump {
    font-family: PingFang SC;
    font-weight: bold;
    display: flex;
    align-items: center;
    /*margin-right: 15px;*/
    font-size: 15px;
  }
  .content {
    width: 100%;
    overflow: auto;
    background: #FAF9FE;
    box-sizing: border-box;
    font-size: 13px;
  }
  .box {
    width: 47%;
    float: left;
    height: 35vw;
    margin-left: 2%;
    margin-top: 2vw;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
  }
   .box:last-child{
     margin-bottom: 30px;
   }
  .box ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  .box ul li{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 5px;
  }
  .box ul li div{
    width: 41vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*word-wrap: break-word;*/
    margin-top: 5px;
  }
  .box ul li div:last-child{
    margin-bottom: 5px;
  }
  .box img{
    width: 9vw;
    height: 9vw;
  }
  .name{
    margin: 0 2vw;
  }
  .nan{
    background: rgba(205, 239, 255, 1);
  }
  .nv{
    background: rgba(255, 227, 247, 1);
  }
  .mySelfGirl {
    color: #CB6E78;
  }
  .mySelfBoy {
    color: #83CAEB;
  }
  .myself {
    width: 29px;
    height: 18px;
    background: #fff;
    border-radius: 4px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /*加载*/
  .loading {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
   /deep/ .el-input--small .el-input__inner{
     color: #1DA4F2 !important;
     border-radius: 15px;
     background: rgba(29, 164, 242, 0.2) !important;
     border: 1px solid rgba(29, 164, 242, 0.2) !important;
   }
   /deep/ .is-focus .el-input__inner{
     background: rgba(29, 164, 242, 1) !important;
     border: 1px solid rgba(29, 164, 242, 1) !important;
     border-radius: 15px;
     color: white !important;
   }
   /deep/ .el-icon-arrow-up:before {
     content: "\E6E1";
     color: #1DA4F2 !important;
   }
   /deep/ .el-input__inner::placeholder{
     color:  #1DA4F2 !important;
   }
  /deep/  .is-focus .el-input__inner::placeholder{
    color:  #fff !important;
  }
   /deep/ .is-focus .el-icon-arrow-up:before {
     content: "\E6E1";
     color: #fff !important;
   }
</style>
